<template>
  <div pop class="guizeCont" v-show="show">
    <div class="cont">
      <div class="guizeclose" @click.stop="hideGuize"></div>
      <div class="swiper-container swiper-container-popup-info">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><div class="content"></div></div>
        </div>
        <div class="swiper-scrollbar swiper-scrollbar-popup-info"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import store from 'store/store'
  import Swiper from 'swiper'

  export default {
    data () {
      return {
        mySwiper: {}
      }
    },
    computed: {
      show () {
        return store.state.showGuize
      }
    },
    watch: {
      show: 'showCont'
    },
    methods: {
      initSwiper () {
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.swiper-container-popup-info', {
            direction: 'vertical',
            freeMode: true,
            slidesPerView: 'auto',
            scrollbar: '.swiper-scrollbar-popup-info',
            scrollbarHide: false,
            slidesOffsetAfter: 30
          })
        })
      },
      showCont () {
        if (this.show) {
          this.initSwiper()
        }
      },
      hideGuize () {
        this.$store.dispatch('setShowGuize', false)
        this.mySwiper.destroy()
      }
    }
  }
</script>
